<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
        <!-- 引入dayjs -->
        <script src="../js/dayjs.min.js"></script>
    <title>01_过滤器</title>
</head>
<body>
    
    <!-- 
            过滤器：
                定义：要对显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
                语法：
                    1.注册过滤器：Vue.filter(name,callback) 或 全局：new Vue(filters:{})
                    2.使用过滤器：{{xxx | 过滤器名}}  或 v-bind:属性="xxx | 过滤器名"（极少使用）
                
                备注：
                    1.过滤器也可以改变额外参数、多个过滤器也可以串联
                    2.过滤器并没有改变原本的数据，是产生新的对应的数据。
     -->


    <!-- 容器 -->
    <div id="root">
        <h2>格式化时间</h2>
        <!-- computed实现 -->
        <h3>现在时间是：{{formDateTiem}}</h3>
        <!-- methods实现 -->
        <h3>现在时间是：{{formDateTimeMethod()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在时间是：{{Date.now() | filterDateTime()}}</h3>
        <!-- 过滤器实现 (传参)-->
        <h3>现在时间是：{{Date.now() | filterDateTime('YYYY-MM-DD')}}</h3>
         <!-- 过滤器实现 (传参2)-->
         <h3>现在时间是：{{Date.now() | filterDateTime('YYYY-MM-DD') | mySlice}}</h3>

         <h3 :x="name | mySlice">hell</h3>
        
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

       /*
        dayjs语法：
        dayjs()
            .startOf('month')
            .add(1, 'day')
            .set('year', 2018)
            .format('YYYY-MM-DD HH:mm:ss')
       */
      // 定义全局过滤器
      Vue.filter('mySlice',function(value){
            // 过滤字符
            return value.slice(0,4)
      })
       
       new Vue({
            el:'#root',
            data:{
                dateTime:1655089143428,
                name:'你好科泰，欢迎你',

            },
            // 计算属性
            computed:{
                formDateTiem(){
                   return  dayjs(this.dateTime).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods:{
                formDateTimeMethod(){
                    return  dayjs(this.dateTime).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 局部过滤器
            filters:{
                // ES6 新特性，形参默认值
                filterDateTime(value,format='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(format)
                },
                // mySlice(value){
                //     // 过滤字符
                //     return value.slice(0,4)
                //     // return dayjs(value).format('YYYY');
                // }
            }
        })
 
       
    </script>
</body>
</html>